<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .box-card {
        width: 500px;
        height: 490px;
        margin: 0 auto;
        margin-top: 100px;
    }
    .box-card1 {
        width: 500px;
        height: 50px;
        position: absolute;
        top: 47px;
        left: 517px;

    }
    .zz{
        position: absolute;
        top: -10px;
        left: 160px;
    }
</style>
<body>

<div id="app">
    <el-card class="box-card1">
        <h2 class="zz">预&nbsp;&nbsp;&nbsp;约&nbsp;&nbsp;&nbsp;查&nbsp;&nbsp;&nbsp;询</h2>
    </el-card>

    <el-card class="box-card">
        <div style="height: 50px;">
            <el-link :underline="false" style="margin-left: 100px; font-size: 25px;">姓名:{{info.bname}}</el-link>
        </div>

        <div style=" height: 50px; margin-top: 15px; ">
            <el-link :underline="false" style="margin-left: 100px; font-size: 25px;">预约医师:{{info.dname}}</el-link>
        </div>

        <div style=" height: 50px; margin-top: 15px;">
            <el-link :underline="false" style="margin-left: 100px; font-size: 25px;">预约科室:{{info.kname}}</el-link>
        </div>

        <div style=" height: 50px; margin-top: 15px;">
            <el-link :underline="false" style="margin-left: 100px; font-size: 25px;">病情:{{info.text}}</el-link>
        </div>

        <div style=" height: 50px; margin-top: 8px;">
            <el-link :underline="false" style="margin-left: 100px; font-size: 25px;">预约状态:
                <el-link :underline="false" v-if="info.state == 0"><h1 style="margin-top: 9px;font-size: 25px; color: cornflowerblue;">预约中，请耐心等待</h1></el-link>
                <el-link :underline="false" v-if="info.state == 1"><h1 style="margin-top: 9px;font-size: 25px; color: #3dce42;">恭喜您，已约上</h1></el-link>
                <el-link :underline="false" v-if="info.state == 2"><h1 style="margin-top: 9px;font-size: 25px; color: red;">您的预约被拒绝</h1></el-link>
        </div>

        <el-drawer
                :visible.sync="drawer"
                :direction="direction"
                style="width: 500px; height: 500px; margin: 0 auto;margin-top: 90px;">
            <span style="margin-left: 100px; font-size: 22px;color: brown;">医生建议：{{massage.proposal}}</span>
        </el-drawer>

    </el-card>

</div>

</body>
<script>
    var haha = new Vue({
        el:"#app",
        data:{
            direction: 'btt',
            drawer: false,
            info:{},
            massage:{}
        },
        methods:{}
    });
    var search = location.search;
    var a = search.split("=")[1];
    $.post("/ssm/patient/getResult?a="+a,haha.info,function (backData) {
        haha.info = backData.data
        if( haha.info.state == 1 ){
            var name = haha.info.bname;
            $.get("/ssm/patient/getProposal?name="+name,function (backData) {
                haha.massage = backData.data;
                haha.drawer = true;
            })
        }
    })
</script>
</html>